import { ConfigProvider, App as AntProvider, theme } from 'antd'
import RouterProvider from '@/routers/index.tsx'
import { useSelector } from '@/redux/index.ts'
import dayjs from 'dayjs' //时间格式转换库
import zhCN from 'antd/locale/zh_CN' //antd中文语言包，默认英文
import enUS from 'antd/locale/en_US'
import 'dayjs/locale/zh-cn' //dayjs中文语言包，默认英文(antd切换中英文时，需要配合dayjs使用)

dayjs.locale('zh-cn')

const App: React.FC = () => {
  const { isDarkMode, language, themeColor, borderRaduis } = useSelector((state) => state.global)
  return (
    <ConfigProvider
      locale={language === 'zhCN' ? zhCN : enUS}
      theme={{
        token: {
          colorPrimary: '#00ffff',
          colorBgContainer: ' url(../public/imges/building/control/background.png)',
          colorText: '#00ffff',
          colorBorder: '#00ffff',
          borderRadius: 2
        },
        components: {
          Button: {
            style: {
              '&:hover': {
                boxShadow: '0 0 10px rgba(98, 207, 224, 0.5)'
              }
            }
          },
          Table: {
            headerBg: 'linear-gradient(135deg,rgb(22, 69, 135),rgb(14, 40, 71))'
          }
        },
        body: {
          style: {
            backgroundImage: `url('/static/tech-texture.jpg'), linear-gradient(45deg, #000, #222, #000)`,
            backgroundSize: 'cover, 400% 400%',
            backgroundRepeat: 'no-repeat, repeat',
            backgroundBlendMode: 'overlay',
            animation: 'gradientAnimation 15s ease infinite'
          }
        },
        algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm
      }}
    >
      <AntProvider>
        <RouterProvider />
      </AntProvider>
    </ConfigProvider>
  )
}

export default App
